<template>
  <div class="q-pa-md q-gutter-md">
    <t-badge color="blue"> #4D96F2 </t-badge>

    <t-badge color="orange" text-color="black" label="2" />

    <t-badge color="purple">
      <t-icon name="bluetooth" color="white" />
    </t-badge>

    <t-badge color="red">
      12 <t-icon name="warning" color="white" class="q-ml-xs" />
    </t-badge>

    <div class="text-h6">
      Badge <t-badge color="primary">v1.0.0+</t-badge>
    </div>

    <div> Feature <t-badge color="primary">v1.0.0+</t-badge> </div>

    <t-item
      clickable
      v-ripple
      class="rounded-borders"
      :class="$q.dark.isActive ? 'bg-grey-9 text-white' : 'bg-grey-2'"
    >
      <t-item-section avatar>
        <t-avatar rounded>
          <img src="https://cdn.quasar.dev/img/chaosmonkey.png" />
        </t-avatar>
      </t-item-section>

      <t-item-section>
        <t-item-label> Ganglia </t-item-label>
        <t-item-label caption>
          <t-badge color="yellow-6" text-color="black">
            3
            <t-icon name="warning" size="14px" class="q-ml-xs" />
          </t-badge>
        </t-item-label>
      </t-item-section>

      <t-item-section side>
        <span>2 min ago</span>
      </t-item-section>
    </t-item>
  </div>
</template>
